<div class="app-wrapper">
    <div class="left-wrapper">
        <div class="app-logo">
            <img [src]="siteLogo" alt="">
        </div>
        <ul class="left-menu-nav">
            <li class="tab-list-item" *ngFor="let tab of listData">
                <a class="tab-list-link" [routerLink]="tab.url" routerLinkActive="active" #rla="routerLinkActive" [routerLinkActiveOptions]="{exact:false}">
                    <img [hidden]="rla.isActive" [src]="tab.img" />
                    <img [hidden]="!rla.isActive" [src]="tab.imgActive" />
                    <span [class.active]="rla.isActive">{{tab.text}}</span>
                </a>
            </li>
        </ul>
        <div class="about" (click)="switchModal('active')">
            <img *ngIf="modalFlag !== 'active'" src="/static/images/nav_icon_about_default.png">
            <img *ngIf="modalFlag === 'active'" src="/static/images/nav_icon_about_pressed.png">
        </div>
        <about-us *ngIf="modalFlag === 'active'" (setModal)="switchModal($event)"></about-us>
        <user-account></user-account>
    </div>
    <div class="right-wrapper">
        <div class="main-content ui-scroll">
            <router-outlet></router-outlet>
        </div>
        <div class="footer">
            <div class="index-table-main">
                <div class="index-table-row" (click)="openStock(block)" *ngFor="let block of blockData; trackBy: getBlockSymbol">
                    <span class="index-table-cell" [ngClass]="getSuitableClass(header, block['change_rate'])" *ngFor="let header of quoteHeaders.bodyHeader">
          {{ header.key === 'symbol' ? (block['symbol'] | stripExtension): header.withUnit ? (block[header.key] | optimizeUnit) : (block[header.key])}}
          </span>
                </div>
            </div>
            <div class="time">
                <span class="fa fa-clock-o"></span>
                <span class="clock-text">{{theBigBen | datex:'YYYY-MM-DD HH:mm:ss'}}</span>
            </div>
        </div>
    </div>
</div>
<cm-modal></cm-modal>